﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="XLTJControl.ascx.cs" Inherits="MyControls_XLTJControl" %>
<style type="text/css">
    .container, .container *
    {
        margin: 0;
        padding: 0;
    }
    .slider
    {
        position: absolute;
        margin-left: 0px;
        padding-left: 0px;
        margin-top: 0px;
    }
    .slider li
    {
        float: left;
        list-style: none;
        display: inline;
        width: 256px;
        height: 233px;
        margin-left: 0px;
        padding-left: 0px;
        list-style-type: none;
    }
    .slider2
    {
        width: 20000px;
    }
    .slider2 li
    {
        float: left;
        width: 256px;
        height: 233px;
        list-style-type: none;
    }
    .num
    {
        position: absolute;
        right: 15px;
        bottom: 0px;
    }
    .num li
    {
        float: left;
        color: #FF7300;
        text-align: center;
        line-height: 16px;
        width: 16px;
        height: 16px;
        font-family: Arial;
        font-size: 12px;
        cursor: pointer;
        overflow: hidden;
        margin: 3px 1px;
        border: 1px solid #FF7300;
        background-color: #fff;
    }
    .num li.on
    {
        color: #fff;
        line-height: 21px;
        width: 21px;
        height: 21px;
        font-size: 16px;
        margin: 0 1px;
        border: 0;
        background-color: #FF7300;
        font-weight: bold;
    }
</style>

<script>
//Demo2:
$(function(){
     var len2  = $("#idNum2 > li").length;
	 var index2 = 0;
	 $("#idNum2 li").mouseover(function(){
		index2  =   $("#idNum2 li").index(this);
		showImg2(index2);
	});	
	 //滑入 停止动画，滑出开始动画.
	 $('#idTransformView2').hover(function(){
			  if(MyTime2){
				 clearInterval(MyTime2);
			  }
	 },function(){
			  MyTime2 = setInterval(function(){
			    showImg2(index2)
				index2++;
				if(index2==len2){index2=0;}
			  } , 5000);
	 });
	 //自动开始
	 var MyTime2 = setInterval(function(){
		showImg2(index2)
		index2++;
		if(index2==len2){index2=0;}
	 } , 5000);
})
// Demo2 : 关键函数：通过控制left ，来显示不通的幻灯片
function showImg2(i){
		$("#idSlider2").stop(true,false).animate({left : -256*i},800);
		 $("#idNum2 li")
			.eq(i).addClass("on")
			.siblings().removeClass("on");
}
</script>
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function () { $("#zzry a").lightBox(); });
        
    </script>
    
<div id="idTransformView2" style="position: relative; overflow: hidden; height: 233px;
    width: 256px;">
    <ul class="slider slider2" id="idSlider2">
        <li id="zzry">
            <asp:HyperLink ID="hlklink" runat="server"><asp:Image ID="imgMaps" runat="server" Width="256px" Height="233px" /></asp:HyperLink>
        </li>
        <li>
            <div style="line-height:20px; margin-left:5px;">
                <asp:Repeater ID="rptTuiJianLine" runat="server">
                    <ItemTemplate>
                        <a href='<%#GetLineLink(Eval("travelType"),Eval("id")) %>' title='<%#Eval("title") %>'>
                            ·<%#TFXK.Common.StrHelper.CutString(Eval("title")+"",30) %>
                        </a>
                        <br />
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </li>
    </ul>
    <ul class="num" id="idNum2">
        <li>图</li>
        <li>线</li>
    </ul>
</div>
